<template>
  <!-- 对话框配置项: 关闭时销毁-->
  <el-drawer
    v-model="dialogs.event.search"
    title="搜素结果"
    destroy-on-close
    :close-on-click-modal="false"
    direction="btt"
    :modal="false"
    :size="360"
  >
    <template v-if="gridData.length">
      <!-- 表格 -->
      <el-table :data="gridData">
        <el-table-column
          property="event_number"
          label="事件编号"
          fixed="left"
          width="150"
        />
        <el-table-column property="event_type" label="事件类型" width="200" />
        <el-table-column property="event_level" label="事件等级" width="200" />
        <el-table-column
          property="event_datetime"
          label="发生时间"
          width="200"
        />
        <el-table-column property="event_addr" label="发生地点" width="300" />
        <el-table-column
          property="event_describe"
          label="事件描述"
          width="400"
        />
        <el-table-column property="event_car" label="事件车辆" width="200" />
        <el-table-column property="user_truname" label="报告人" width="200" />
        <el-table-column property="user_phone" label="联系方式" width="200" />
        <el-table-column fixed="right" label="飞行到该事件发生地点" width="200">
          <template #default="scope">
            <el-button
              type="success"
              round
              @click="handleFlyToMap(scope.$index)"
              >飞行</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <br />
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 8, 10]"
        :small="false"
        :disabled="false"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </template>
    <template v-else>
      <el-empty :image-size="100" :description="'暂时没有查询到的交通事件!'" />
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, onMounted, toRefs } from 'vue'
import { usePopup } from './hooks/usePopup.js'
import { useDialogsStore } from '@/stores/dialogs' // 使用pinia
import { useSearchStore } from '@/stores/search.js' // 使用pinia
import { useMapStore } from '@/stores/map' // 使用pinia
import evnetApi from '@/apis/event.js'
const { search } = useSearchStore()
const { dialogs } = useDialogsStore()
const { map } = toRefs(useMapStore())

const gridData = ref([])
const currentPage = ref(1)
const pageSize = ref(3)
const pageTotal = ref(0)

const handleFlyToMap = (index) => {
  let FlyToPosition = gridData.value[index].event_location.split(',')
  map.value.getView().animate({
    center: FlyToPosition,
    zoom: 17,
    duration: 500
  })
  let contentHtml = `<ul style="width:260px;">
    <li style="padding:10px">事件编号: ${gridData.value[index].event_number}</li>
    <li style="padding:10px">事件类型: ${gridData.value[index].event_type}</li>
    <li style="padding:10px">事件级别: ${gridData.value[index].event_level}</li>
    <li style="padding:10px">发生时间: ${gridData.value[index].event_datetime}</li>
    <li style="padding:10px">发生地点: ${gridData.value[index].event_addr}</li>
  </ul>`
  usePopup({ map: map.value, position: FlyToPosition, contentHtml })
}

// 按搜索内容获取数据
const getEventsChecked = async (attr, value, pages, num) => {
  const res = await evnetApi.getEventLimitChecked(attr, value, pages, num)
  console.log(res)
  pageTotal.value = res.result.total
  gridData.value = res.result.data
}

// 分页器处理函数
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  getEventsChecked(search.select, search.input, currentPage.value, val)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  getEventsChecked(search.select, search.input, val, pageSize.value)
}

onMounted(() => {
  getEventsChecked(search.select, search.input, 1, 3)
})
</script>
<style scoped></style>
